<template>
  <!-- 对话框 -->
  <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" class="dialog" @close="close">
    <!-- 表单 -->
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="form.description" />
      </el-form-item>

      <el-form-item label="开启">
        <el-switch v-model="form.enVisible" active-value="1" inactive-value="0" />
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="submitForm">确定</el-button>
      <el-button size="mini" @click="dialogVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addPermission, getPermissionInfo, putPermissionInfo } from '@/api/permission'
export default {
  name: 'AddPermission',
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '', // 权限点名字
        code: '', // 权限点标识
        description: '', // 权限点描述
        type: null, // 权限点类型
        enVisible: '' // 权限点开启状态
      },
      title: '', // 标题
      rules: {
        name: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }
        ]
      },
      id: 0 // 那行数据
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {},
  methods: {
    open(id, pid, str) {
      this.dialogVisible = true
      this.title = str;
      (id && (this.id = id)) || (this.id = 0);
      (pid === 0 && (this.form.type = 1)) || (this.form.type = 2)
      if (str === '编辑权限点') {
        this.getPermissionInfo(id)
      }
    },
    submitForm() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          console.log(this.id)
          if (this.title === '新增权限') {
            await addPermission({ pid: this.id, ...this.form })
            // 提示增加成功
            this.$message.success('添加权限成功！')
          } else {
            console.log(1)
            await putPermissionInfo(this.form)
            // 提示增加成功
            this.$message.success('修改权限成功！')
          }
          // 触发父组件的刷新
          this.$emit('success')
          this.dialogVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    close() {
      // 清除所有的校验结果
      this.$refs.form.clearValidate()
      // 变量变成false
      this.dialogVisible = false
      // 数据清空
      this.form = {
        name: '', // 权限点名字
        code: '', // 权限点标识
        description: '', // 权限点描述
        type: null, // 权限点类型
        enVisible: '' // 权限点开启状态
      }
    },
    // 当是编辑的时候回显数据
    async getPermissionInfo(id) {
      const res = await getPermissionInfo(id)
      console.log(res)
      this.form = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding-left: 60px !important;
  padding-right: 60px !important;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
